<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据表格</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=318" media="all"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 数据表格中的select尺寸调整 */
        .layui-table-view .layui-table-cell .layui-select-title .layui-input {
            height: 28px;
            line-height: 28px;
        }

        .layui-table-view [lay-size="lg"] .layui-table-cell .layui-select-title .layui-input {
            height: 40px;
            line-height: 40px;
        }

        .layui-table-view [lay-size="lg"] .layui-table-cell .layui-select-title .layui-input {
            height: 40px;
            line-height: 40px;
        }

        .layui-table-view [lay-size="sm"] .layui-table-cell .layui-select-title .layui-input {
            height: 20px;
            line-height: 20px;
        }

        .layui-table-view [lay-size="sm"] .layui-table-cell .layui-btn-xs {
            height: 18px;
            line-height: 18px;
        }
    </style>
</head>
<body onscroll="layui.admin.hideFixedEl();">
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">

            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label">起始日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="minDate" id="minDate" lay-verify="date" placeholder="yyyy-MM-dd"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">截止日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="maxDate" id="maxDate" lay-verify="date" placeholder="yyyy-MM-dd"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">账&emsp;&emsp;号:</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" placeholder="输入账号"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用&nbsp;&nbsp;户&nbsp;&nbsp;名:</label>
                        <div class="layui-input-inline">
                            <input name="nickName" class="layui-input" placeholder="输入用户名"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手&nbsp;&nbsp;机&nbsp;&nbsp;号:</label>
                        <div class="layui-input-inline">
                            <input name="phone" class="layui-input" placeholder="输入用户名"/>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">性&emsp;&emsp;别:</label>
                        <div class="layui-input-inline">
                            <select name="sex">
                                <option value="">所有</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">状&emsp;&emsp;态:</label>
                        <div class="layui-input-inline">
                            <select name="state">
                                <option value="">所有</option>
                                <option value="0">正常</option>
                                <option value="1">冻结</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">注册时间:</label>
                        <div class="layui-input-inline">
                            <input id="tbAdvSelDate" name="createTime" class="layui-input icon-date"
                                   placeholder="选择注册时间" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="tbAdvTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>


                        <a class="layui-btn form-search-expand" search-expand>
                            展开 <i class="layui-icon layui-icon-down"></i></a>
                    </div>
                </div>
            </form>
            <div class="layui-form-item">
                <div class="layui-inline pull-left">
                    <button class="layui-btn icon-btn" id="addStockDetail"><i
                            class="layui-icon">&#xe654;</i>添加
                    </button>
                    <button id="file-btn-upload" class="layui-btn layui-btn layui-btn-normal icon-btn">
                        <i class="layui-icon">&#xe681;</i>导入
                    </button>
                    <button id="tbBasicExportBtn" class="layui-btn icon-btn" type="button">
                        <i class="layui-icon">&#xe67d;</i>导出
                    </button>
                    <button class="layui-btn layui-btn-danger icon-btn"><i
                            class="layui-icon">&#xe640;</i>删除
                    </button>
                </div>
            </div>
            <div id="file-list-group" class="layui-hide"><input type="file" id="importStockExcel"></div>


            <!-- 数据表格 -->
            <table id="tbBasicTable" lay-filter="tbBasicTable"></table>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            表格中的select下拉框、dropdown下拉按钮等都不需要自己对表格做任何处理就可以完美的显示，
            因为easyweb提供了fixed定位方式的select和dropdown。
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tbBasicTbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" data-dropdown="#userTbDrop{{d.LAY_INDEX}}" no-shade="true">
        更多<i class="layui-icon layui-icon-drop" style="font-size: 12px;margin-right: 0;"></i></a>
    <!-- 下拉菜单 -->
    <ul class="dropdown-menu-nav dropdown-bottom-right layui-hide" id="userTbDrop{{d.LAY_INDEX}}">
        <div class="dropdown-anchor"></div>
        <li><a lay-event="lock"><i class="layui-icon layui-icon-password"></i>锁定用户</a></li>
        <li><a lay-event="reset"><i class="layui-icon layui-icon-key"></i>重置密码</a></li>
        <li class="have-more show-left">
            <a><i class="layui-icon layui-icon-upload-drag"></i>上传资料&nbsp;&nbsp;</a>
            <ul class="dropdown-menu-nav-child">
                <li><a><i class="layui-icon layui-icon-camera"></i>上传头像</a></li>
                <li><a><i class="layui-icon layui-icon-picture-fine"></i>上传照片</a></li>
            </ul>
        </li>
    </ul>
</script>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=318"></script>
<script>
    layui.use(['layer', 'form', 'tableX', 'util', 'dropdown', 'format', 'laydate', 'upload', 'fileChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.tableX;
        var util = layui.util;
        var dropdown = layui.dropdown;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var fileChoose = layui.fileChoose;
        var format = layui.format;


        /* 渲染时间选择 */
        laydate.render({
            elem: '#minDate'
        });
        laydate.render({
            elem: '#maxDate'
        });


        // 上传
        upload.render({
            elem: '#file-btn-upload',
            url: '/valueRecommend/importBasicFinancialData',   // 上传文件的url
            accept: 'file',
            before: function (obj) {
                // //预读本地文件示例，不支持ie8
                // obj.preview(function (index, file, result) {
                //     $('#importStockExcel').attr('src', result); //图片链接（base64）
                // });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                } else if (res.code >= 0) {  //上传成功
                    return layer.msg('上传成功');
                }
                insTb.reload('tbBasicTable', {   // 按表单设置的参数请求表格接口，从第一页重新加载展示
                    url: '/valueRecommend/queryStockBaseFinancialDataCondition',
                    method: "get"
                });

            }
            , error: function () {
                // // 演示失败状态，并实现重传
                // var importStockExcel = $('#importStockExcel');
                // importStockExcel.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                // importStockExcel.find('.demo-reload').on('click', function () {
                //     upload.upload();
                // });
            }
        });

        // // 弹窗选择
        // $('#file-btn-upload').click(function () {
        //     fileChoose.open({
        //         fileUrl: '',
        //         listUrl: '',
        //         num: 1,   // 最多选择的文件数
        //         dialog: {
        //             offset: '60px'
        //         },
        //         onChoose: function (urls) {
        //             layer.msg('你选择了：' + JSON.stringify(urls), {icon: 1});
        //         }
        //     });
        // });


        /* 渲染表格 */
        var insTb = table.renderFront({
            elem: '#tbBasicTable',
            url: '/valueRecommend/queryStockBaseFinancialDataCondition',
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 10 //只显示 1 个连续页码
                , first: '首页' //不显示首页
                , last: '尾页' //不显示尾页

            }
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }],
            cellMinWidth: 150,
            cols: [[
                {type: 'checkbox'},
                //代码	600028
                {field: 'stockCode', title: '代码', align: 'center', fixed: 'left', sort: false},
                //名称	 中国石化
                {field: 'stockName', title: '名称', align: 'center', fixed: 'left', sort: false},
                //加权净资产收益率	-2.73
                {
                    field: 'weightedReturnOnEquity', templet: function (d) {
                        return format.toPercent(d.totalIncomeY2Y);
                    }, title: '加权净资产收益率', align: 'center', sort: false
                },
                {field: 'pe', title: '市盈率', sort: false},
                //营业总收入同比	-22.59
                {
                    field: 'totalIncomeY2Y', templet: function (d) {
                        return format.toPercent(d.totalIncomeY2Y);
                    }, title: '营业总收入同比', align: 'center', sort: false
                },
                //归属净利润同比	-234
                {
                    field: 'netProfitAttributableY2Y', title: '归属净利润同比', align: 'center', sort: false
                },
                //销售毛利率	10.12
                {
                    field: 'salesMargin', templet: function (d) {
                        return format.toPercent(d.salesMargin);
                    }, title: '销售毛利率', align: 'center', sort: false
                },
                //营业总收入同比	-22.59
                {
                    field: 'totalIncomeY2Y', templet: function (d) {
                        return format.toPercent(d.totalIncomeY2Y);
                    }, title: '营业总收入同比', align: 'center', sort: false
                },
                //资产负债比率	53.1
                {
                    field: 'balanceSheetRatios', templet: function (d) {
                        return format.toPercent(d.balanceSheetRatios);
                    }, title: '资产负债比率', align: 'center', sort: false
                },
                {field: 'pb', title: '市净率', sort: false},
                {field: 'price', title: '价格', sort: false},
                {field: 'industryName', title: '行业名称', sort: false},

                //总股本	 1211亿
                {field: 'stockTotalNums', title: '总股本', align: 'center', sort: false},
                //流通A股	 956亿
                {field: 'circulateStockNums', title: '流通A股', align: 'center', sort: false},
                //人均持股数	 17.5万
                {field: 'personStockNums', title: '人均持股数', align: 'center', sort: false},
                //每股收益	-0.16
                {field: 'earningsPerShare', title: '每股收益', align: 'center', sort: false},
                //每股净资产	5.88
                {field: 'netAssetValuePerShare', title: '每股净资产', align: 'center', sort: false},
                //营业总收入	 5555亿
                {field: 'grossRevenue', title: '营业总收入', align: 'center', sort: false},

                //营业利润	 -283亿
                {field: 'profit', title: '营业利润', align: 'center', sort: false},
                //投资收益	 1.53亿
                {field: 'incomeFromInvestment', title: '投资收益', align: 'center', sort: false},
                //利润总额	 -286亿
                {field: 'totalProfit', title: '利润总额', align: 'center', sort: false},
                //归属净利润	 -198亿
                {field: 'netProfitAttributable', title: '归属净利润', align: 'center', sort: false},

                //未分配利润	 2673亿
                {field: 'undistributedProfit', title: '未分配利润', align: 'center', sort: false},
                //每股未分配利润	2.02
                {field: 'perStockUndistributedProfit', title: '每股未分配利润', align: 'center', sort: false},

                //总资产	 1.81万亿
                {field: 'totalAsses', title: '总资产', align: 'center', sort: false},
                //流动资产	 4960亿
                {field: 'circulateAssets', title: '流动资产', align: 'center', sort: false},
                //固定资产	 6116亿
                {field: 'fixedAssets', title: '固定资产', align: 'center', sort: false},
                //无形资产	 1080亿
                {field: 'intangibleAssets', title: '无形资产', align: 'center', sort: false},
                //总负债	 9599亿
                {field: 'grossLiability', title: '总负债', align: 'center', sort: false},
                //流动负债	 6393亿
                {field: 'currentLiabilities', title: '流动负债', align: 'center', sort: false},
                //长期负债	 3206亿
                {field: 'longTermLiability', title: '长期负债', align: 'center', sort: false},

                //股东权益	 7124亿
                {field: 'stockholdersEquity', title: '股东权益', align: 'center', sort: false},
                //股东权益比	39.41
                {
                    field: 'equityRatio', templet: function (d) {
                        return format.toPercent(d.equityRatio);
                    }, title: '股东权益比', align: 'center', sort: false
                },
                //公积金	 1221亿
                {field: 'accumulationFund', title: '公积金', align: 'center', sort: false},
                //每股公积金	1.01
                {field: 'accumulationFundPerShare', title: '每股公积金', align: 'center', sort: false},
                //流通B股	0
                {field: 'circulateBStockNums', title: '流通B股', align: 'center', sort: false},
                //H股	 255亿
                {field: 'hStockTotalNums', title: 'H股', align: 'center', sort: false},
                //上市日期	 2001/08/08
                {
                    field: 'stockSaleDate', templet: function (d) {
                        return util.toDateString(d.stockSaleDate);
                    }, title: '上市日期', align: 'center', sort: false
                },
                //更新日期	 2020/03/31
                {
                    field: 'updateTime', templet: function (d) {
                        return util.toDateString(d.updateTime);
                    }, title: '更新日期', align: 'center', sort: false
                },
                {title: '操作', toolbar: '#tbBasicTbBar', align: 'center', minWidth: 200, fixed: 'right'},


            ]]

        });

        /* 表格搜索 */
        form.on('submit(tbBasicTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });


        // 导出excel
        $('#tbBasicExportBtn').click(function () {
            var checkRows = table.checkStatus('tbBasicTable');
            if (checkRows.data.length === 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });

    });
</script>
</body>
</html>
